<template>
  <div class="wb-process-vertical-bar" :style="itemStyle">
    <div class="wb-bar-con" :style="processBorderStyle" @click.stop>
      <img class="mask-bar" :style="maskStyle" v-lazy="commonAttr.barUrl">
      <span class="wb-bar" :style="barStyle">
        <span v-if="commonAttr.isDisplayPercent" class="marker min-width-300 margin-left-70" :style="marginLeftStyle">
          <span v-if="commonAttr.isTriangle" class="triangle" :style="triangleColor"></span>
          <span v-html="percentInfo" :style="infoStyle" ref="info"></span>
        </span>
      </span>
    </div>
  </div>
</template>

<script>
import { utils } from '@/components/utils/utils'
import { process } from "@/components/js/items/process"
import { reactive } from 'vue'
import { getPxOVwByValue, getPxOrVw } from '@/store/utils'

export default {
  mixins: [utils, process],
  components: {
  },
  setup () {
    return {
      marginLeftStyle: reactive({})
    }
  },
  computed: {
    barStyle(){
      let commonAttr = this.item.commonAttr
      let unit = getPxOrVw()
      let style_ = {
        height: this.percent,
        bottom: this.percent + "%",
        borderRadius: commonAttr.borderRadius + unit
      }
      if(!commonAttr.barUrl && commonAttr.barUrl.length <= 0){
        style_.backgroundColor = commonAttr.barColor
      }
      return style_ 
    },
    maskStyle(){
      return {
        'clip-path': 'inset('+ (100-this.percent)+'% 0 0 0)',
        '-webkit-clip-path': 'inset('+ (100-this.percent)+'% 0 0 0)',
      }
    },
  },
  mounted(){
    setTimeout( () => {
      this.marginLeft()
    }, 500)
  },
  methods: {
    marginLeft(){
      let unit = getPxOVwByValue(30)
      let style_ = {}
      if(this.commonAttr.isRightPercentInfo){
        style_.marginLeft = unit
        style_.textAlign = 'left'
      }else{
        unit = getPxOVwByValue(-110)
        style_.marginLeft = unit
        style_.textAlign = 'right'
      }
      this.marginLeftStyle = style_
    },
  }
};
</script>
<style lang="scss">
.wb-process-vertical-bar {
  width: inherit;
  height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;
  align-items: center;
  align-content: center;
  color: inherit;

  .wb-bar-con{
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: inherit;
    
    .mask-bar{
      clip-path: inset(0% 0px 0px 0px);
      transition: all 0.5s linear;
      background-size: contain;
      height: 98%;
    }
    .wb-bar{
      position: absolute;
      bottom: 0;
      display: inline-block;
      .marker{
        display: inline-block;
        color: inherit;
        display: flex;
        flex-direction: row;
        // justify-content: center;
      }
    }
  }
}
</style>